<template>
	<view class="container">
		<z-paging-swiper class="page">
			<z-tabs ref="tabsRef" :list="tabsList" :current="currentIndex" @change="changeTab" :active-style="{
          'font-size': '28rpx',
          'font-weight': 'bold',
          color: '#333333',
        }" :inactive-style="{ 'font-size': '28rpx', color: '#666666' }" />
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="currentIndex" @change="onChange" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
					<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
					<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
					<card-copons-item ref="listItem" :tabIndex="index" :currentIndex="currentIndex"
						:currentId="currentId" />
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<view class="bottom"><text @click="toMoreCoupon">领取更多好券</text><text @click="toInputDialog">券码兑换</text></view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog" :mask-click="false">
			<view class="dialog-bg">
				<view class="dialog-input">
					<input type="text" v-model="inputValue" placeholder="请输入兑换码" />
				</view>
				<view class="dialog-btns">
					<view class="submit-btn" @click="cancelDialog">立即兑换</view>
					<view class="cancel-btn" @click="closeInput">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref,
		onMounted
	} from "vue";
	import {
		exchangeCoupon
	} from '@/api/coupon.js'
	
	import cardCoponsItem from "@/pages/tabBars/cardCoupons/cardCoponsItem.vue";
	const tabs = ref(null);
	const tabsRef = ref(null);
	const inputDialog = ref(null);
	const inputClose = ref(null);
	const inputValue = ref('')
	const listItem = ref([]); // 在父组件中定义
	const state = reactive({
		tabsList: ["未使用", "已使用", "已过期"],
		currentIndex: 0,
		currentId: 1,
	});
	const {
		tabsList,
		currentIndex,
		currentId
	} = toRefs(state);
	const changeTab = (index, id) => {
		currentIndex.value = index;
		currentId.value = id;
	};

	const onChange = (e) => {
		console.log(e.detail);
		currentIndex.value = e.detail.current;
		console.log(currentId.value);
	};
	//swiper滑动中
	const swiperTransition = (e) => {
		tabsRef.value.setDx(e.detail.dx);
	};
	//swiper滑动结束
	const swiperAnimationfinish = (e) => {
		currentIndex.value = e.detail.current;
		tabsRef.value.unlockDx();
	};
	// 如果要通知当前展示的z-paging刷新，请调用此方法
	const reloadCurrentList = () => {
		listItem.value[currentIndex.value]?.reload();
	};
	onMounted(() => {});
	// 跳转到更多好券页面
	const toMoreCoupon = () => {
		uni.navigateTo({
			url: "/pages/viewSonic/ViewCoupon",
		});
	};

	const cancelDialog = async () => {
		const res = await exchangeCoupon(inputValue.value)

		if (res.code === 200) {
			uni.showToast({
				title: res.msg,
				icon: "success"
			});
			listItem.value[currentIndex.value]?.reload();

			closeInput()

		}else{
			uni.showToast({
				title: res.msg,
				icon: "error"
			});
		}
	}
	// 弹出兑换输入框
	const toInputDialog = () => {
		inputDialog.value.open();
	};
	// 关闭兑换输入框
	const closeInput = () => {
		inputValue.value = ""
		inputDialog.value.close();
	};
</script>

<style lang="scss" scoped>
	.dialog-input input {
		width: 100% !important;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.bottom {
			height: 100rpx;
			background: white;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			font-weight: 500;
			font-size: 30rpx;
			z-index: 999;

			text {
				display: flex;
				justify-content: center;
				flex: 1;

				&:first-child {
					border-right: 1px solid #e2e2e2;
				}
			}
		}

		.dialog-bg {
			width: 100%;
			background: white;
			border-radius: 20rpx;
			padding: 55rpx 37rpx 10rpx 37rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			/* 确保 padding 不影响总宽度 */
		}

		.dialog-input {
			height: 98rpx;
			display: flex;
			align-items: center;
			width: 100%;
			background: #f6f6f6;
			border-radius: 49rpx;
			padding: 0 30rpx;
			/* 左右内边距，避免内容贴边 */
			box-sizing: border-box;
			/* 包含 padding 计算宽度 */
		}

		/* 让 input 占满父容器 */
		.dialog-input input {
			flex: 1;
			/* 占据剩余空间 */
			height: 100%;
			background: transparent;
			border: none;
			outline: none;
			font-size: 28rpx;
			padding: 0 10rpx;
			/* 可选：输入框内文字间距 */
		}

		.dialog-btns {
			display: flex;
			flex-direction: column;
			width: 100%;
			font-size: 28rpx;
		}

		.submit-btn {
			height: 68rpx;
			background: #2f80ed;
			text-align: center;
			line-height: 68rpx;
			border-radius: 34rpx;
			color: white;
			font-weight: 500;
			margin-top: 42rpx;
			width: 100%;
		}

		.cancel-btn {
			height: 68rpx;
			text-align: center;
			line-height: 68rpx;
			color: #999999;
			margin: 20rpx 0;
			width: 100%;
		}
	}

	.page {
		flex: 1;

		.swiper {
			height: 100%;
			background-color: #f5f5f5;
		}
	}

	::v-deep .z-tabs-item {
		justify-content: center !important;
	}
</style>